import React, { useState } from 'react';
import {
    Table,
    Form,
    Input,
    Select,
    DatePicker,
    Button,
    Space,
    Card,
    Tag,
    message,
    Tooltip
} from 'antd';
import { SearchOutlined, RestOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { useRequest } from 'umi';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import dayjs from 'dayjs';
import { OrderLogRespVO, OperateLogDO, UserTypeMap } from '../types';
import { useIntl } from 'umi';
import { pagedOrderLog } from '@/services/system/log_api';
import OrderStatusTag from './OrderStatusTag';
import { formatToLocalTime, toUTC } from "@/utils/time";

const { RangePicker } = DatePicker;
const { Option } = Select;



const ApiLogTable: React.FC = () => {
  const intl = useIntl();
  const [form] = Form.useForm();

    // 表格列定义
    const columns: ProColumns<OrderLogRespVO>[] = [
    {
      title: intl.formatMessage({ id: 'pages.orderLog.opType' }),
      dataIndex: "opType",
      key: "opType",
      width: 120,
      search: false,
      render: (text) => {
        const typeMap = {
          add: { 
            color: "green", 
            text: intl.formatMessage({ id: 'pages.orderLog.opType.add' }) 
          },
          edit: { 
            color: "blue", 
            text: intl.formatMessage({ id: 'pages.orderLog.opType.edit' }) 
          },
          submit: { 
            color: "orange", 
            text: intl.formatMessage({ id: 'pages.orderLog.opType.submit' }) 
          },
          change: { 
            color: "purple", 
            text: intl.formatMessage({ id: 'pages.orderLog.opType.change' }) 
          },
          out: { 
            color: "red", 
            text: intl.formatMessage({ id: 'pages.orderLog.opType.out' }) 
          },
          other: { 
            color: "default", 
            text: intl.formatMessage({ id: 'pages.orderLog.opType.other' }) 
          },
        };
        const type = typeMap[text] || typeMap.other;
        return <Tag color={type.color}>{type.text}</Tag>;
      },
      filters: true,
      onFilter: true,
    },
    {
      title: intl.formatMessage({ id: 'pages.orderLog.orderCode' }),
      dataIndex: "orderCode",
      key: "orderCode",
      width: 150,
      search: {
        transform: (value) => ({ orderCode: value.trim() }),
      },
    },
    {
      title: intl.formatMessage({ id: 'pages.orderLog.changeType' }),
      dataIndex: "olType",
      key: "olType",
      search: false,
      width: 100,
      render: (text) => text === 0 ? 
        intl.formatMessage({ id: 'pages.orderLog.statusChange' }) : 
        intl.formatMessage({ id: 'pages.orderLog.contentChange' }),
      filters: [
        { 
          text: intl.formatMessage({ id: 'pages.orderLog.statusChange' }), 
          value: 0 
        },
        { 
          text: intl.formatMessage({ id: 'pages.orderLog.contentChange' }), 
          value: 1 
        },
      ],
      onFilter: true,
    },
    {
      title: intl.formatMessage({ id: 'pages.orderLog.statusChange' }),
      key: "statusChange",
      width: 220,
      search: false,
      render: (_, record) => (
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <OrderStatusTag statusCode={record.orderStatusFrom} />
          <ArrowRightOutlined style={{ color: "#bfbfbf", fontSize: 12 }} />
          <OrderStatusTag statusCode={record.orderStatusTo} />
        </div>
      ),
    },
    {
      title: intl.formatMessage({ id: 'pages.orderLog.operator' }),
      dataIndex: "userName",
      key: "userName",
      search: false,
      width: 120,
    },
    {
      title: intl.formatMessage({ id: 'pages.orderLog.opIp' }),
      dataIndex: "olIp",
      search: false,
      key: "olIp",
      width: 120,
    },
    {
      title: intl.formatMessage({ id: 'pages.orderLog.opRemark' }),
      dataIndex: "olComments",
      key: "olComments",
      width: 200,
      search: false,
      ellipsis: true,
      render: (text) => text || "-",
    },
    {
      title: intl.formatMessage({ id: 'pages.orderLog.createTime' }),
      dataIndex: "createTime",
      key: "createTime",
      width: 180,
      valueType: "dateTimeRange",
      hideInForm: true,
      sorter: true,
      search: {
        transform: (value) => {
          if (!value || !value[0] || !value[1]) return {};
          return {
            startTime: dayjs(value[0]).utc().format(),
            endTime: dayjs(value[1]).utc().format(),
          };
        },
      },
      fieldProps: {
        showTime: {
          format: "HH:mm",
          minuteStep: 1,
        },
        format: "YYYY-MM-DD HH:mm",
      },
      render: (_, record) => {
        return formatToLocalTime(record.createTime);
      },
    },
  ];



    return (
        <Card bordered={false}>
            <ProTable<OrderLogRespVO>
                headerTitle="订单日志查询"
                rowKey="id"
                columns={columns}
                request={pagedOrderLog}
                pagination={{
                    pageSize: 10,
                    showSizeChanger: true,
                }}
                form={{
                    form,
                    // 查询表单配置
                    syncToUrl: true,
                    syncToInitialValues: false,
                }}
                // toolBarRender={() => [
                //   <Button key="export" type="primary">
                //     导出日志
                //   </Button>,
                // ]}
                search={{
                    // 自定义搜索表单
                    optionRender: ({ searchText, resetText }, { form }) => [
                        <Button
                            key="search"
                            type="primary"
                            onClick={() => {
                                form?.submit();
                            }}
                            icon={<SearchOutlined />}
                        >
                            {searchText}
                        </Button>,
                        <Button
                            key="reset"
                            onClick={() => {
                                form?.resetFields();
                                form?.submit();
                            }}
                            icon={<RestOutlined />}
                        >
                            {resetText}
                        </Button>,
                    ],
                }}
            />
        </Card>
    );
};

export default ApiLogTable;